<template name="billingPlan">
  <div class="panel panel-default billing-module">
    <div class="panel-heading">
      <h3 class="panel-title"><a href="{{pathFor 'billing'}}" class="text-muted">Billing</a> / Plan</h3>
    </div>
    <div class="panel-body">
      <ul class="list-group">
        {{#each plans}}
          <li class="list-group-item {{#if equals plan.subscription.plan.name name}}list-group-item-success{{/if}} bm-block clearfix">
            <div class="bm-block-content plan">
              <span class="plan-name-quota"><strong>{{capitalize name}}</strong> &mdash; {{limitString limit}}</span>
            </div>
            <!-- Note: this is verbose on purpose. 1.) For readability, 2.) For sanity. -->
            {{#if equals plan.subscription.plan.name name}}
              <button type="button" disabled="disabled" class="btn btn-success pull-right">Current Plan</button>
            {{else}}
              {{#if upgradeAvailable amount.cents}}
                <button type="button" data-loading-text="Upgrading..." class="btn btn-default pull-right downgrade-upgrade">Upgrade</button>
              {{else}}
                {{#if downgradeAvailable limit}}
                  <button type="button" data-loading-text="Downgrading..." class="btn btn-default pull-right downgrade-upgrade">Downgrade</button>
                {{else}}
                  <button type="button" disabled="disabled" class="btn btn-default pull-right downgrade-unavailable">Downgrade Unavailable</button>
                {{/if}}
              {{/if}}
            {{/if}}
          </li>
        {{/each}}
      </ul>
    </div>
  </div>
</template>
